<script >

import {getUserInfoFromToken} from "@/assets/js/TokenFunction";
import {defineComponent} from "vue";
import * as TokenFunction from "@/assets/js/TokenFunction";

export default defineComponent({
  computed: {
    TokenFunction() {

      return TokenFunction
    }
  },
  methods: {getUserInfoFromToken}
})

</script>

<template>
<div>
  <div class="header-container">
    <div class="menu-and-title">
      <h1 class="header-title" onclick="window.location.href='/admin'" style="color: #0070EA">水利知识图谱_后台管理</h1>
      <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect" router>
        <el-menu-item v-if="TokenFunction.getUserInfoFromToken('administratorCategory')>=1" index="/admin/graphManage">水文数据管理</el-menu-item>
        <el-menu-item v-if="TokenFunction.getUserInfoFromToken('administratorCategory')===1" index="/admin/adminManage">管理员设置</el-menu-item>
        <el-menu-item v-if="TokenFunction.getUserInfoFromToken('administratorCategory')>=1" index="/admin/userManage">人员管理</el-menu-item>


      </el-menu>

    </div>
</div>
  <router-view></router-view>
</div>
</template>

<style scoped>
.header-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
  padding: 10px 20px; /* 内边距，可根据需要调整 */
  background-color: #ffffff; /* 背景色，可根据需要调整 */
}

.menu-and-title {
  /* 这个类用于包裹菜单和标题，确保它们在同一行 */
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
}

.header-title {
  margin: 0; /* 移除默认的边距 */
  font-size: 24px; /* 字体大小，可根据需要调整 */
  color: #333; /* 字体颜色，可根据需要调整 */
  /* 可以添加一些额外的样式来控制标题和菜单之间的间距 */
  margin-right: 20px; /* 例如，给标题右侧添加一些间距 */
}
</style>